<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/vue@next"></script>
		<script src="js/data.js"></script>
		<link rel="stylesheet" href="css/cart2.css" id="change">
	</head>
	<body>
		<div class="box">
			<div class="header">
				<div class="img"><img src="img/miLogo.png"></div>
				<h2>我的购物车</h2>
				<h5>温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</h4>
			</div>
			<div class="content" >
				<div class="tr_title">
					<div><input type="checkbox"  v-model="checkALL">全选</div>
					<div></div>
					<div>商品名称</div>
					<div>单价</div>
					<div>数量</div>
					<div>小计</div>
					<div>操作</div>
				</div>
				<div class="tr_content" id="tr_content" v-cloak>
					<div class="tr" v-for="(item,index) in shopCarts">
						<div id="one"><input type="checkbox" v-model="item.checked"></div>
						<div id="two"><a href="#"><img :src="item.pic" ></a></div>
						<div id="three"><a href="#">{{item.shopName}}</a></div>
						<div id="four">{{item.price}}元</div>
						<div id="five">
							<div id="numControl">
								<div id="pre" @click="item.num>0?item.num-=1:item.num=0">-</div>
								<div id="num"><input type="text" :value="item.num" style="width:100%;height:100%;border: none; text-align: center;" id="input"></div>
								<div id="next" @click="item.num+=1">+</div>
							</div>
						</div>
						<div id="six">{{(item.price*item.num).toFixed(1)}}元</div>
						<div id="seven" @click="shopCarts.splice(index,1);"><a href="#"><span>x</span></a></div>
					</div>
				
				</div>
			</div>
			<div class="whole">
				<div class="f1">继续购物</div>
				<div class="f2">已选择<span>{{goodsNum}}</span>件</div>
				<div class="f3"><span>合计：</span><span>{{goodsPrice}}</span><span>元</span></div>
				<button class="f4">去结算</button>
			</div>
			
		</div>
		
		
		
		
		<script>
			//209010214豆雪琴
			var app = Vue.createApp({
				data(){
					return{
						shopCarts:cartsData,
					}
				},
				mounted(){
						 	let length = this.shopCarts.length;
						 	let change = document.getElementById('change');
							if(length>=4){
								change.href='css/cart3.css';
							}
				},//页面渲染完成后执行
				
				computed:{
					
					checkALL:{//全选功能，用到了计算属性中的get和set方法来控制
						set(v){
							this.shopCarts.forEach(item=>{
								item.checked = v;
							});
						},
						get(){
							return this.shopCarts.length === this.shopCarts.filter(item=>item.checked == true).length
						}
					},
					goodsNum(){
						return this.shopCarts
						.filter(item=>item.checked)//过滤,原数组变成了item的checked为ture的数组
						.reduce((pre,cur)=>{
							return pre+cur.num;//reduce()方法实现累加
						},0);
					},
					goodsPrice(){
						return this.shopCarts
						.filter(item=>item.checked)
						.reduce((pre,cur)=>{
							return pre+cur.num*cur.price;
						},0);
					}
				},
			}).mount(".box");
			
		</script>
		
		
	</body>
</html>